
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-baocun"></i>
                    <div class="name">保存</div>
                    <div class="fontclass">.icon-baocun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaodannei_xuanze"></i>
                    <div class="name">表单内_选择</div>
                    <div class="fontclass">.icon-biaodannei_xuanze</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-biaodannei_shanchu"></i>
                    <div class="name">表单内_删除</div>
                    <div class="fontclass">.icon-biaodannei_shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danxuan_weixuanzhong"></i>
                    <div class="name">单选_未选中</div>
                    <div class="fontclass">.icon-danxuan_weixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-chuangjianjianshi"></i>
                    <div class="name">创建监视</div>
                    <div class="fontclass">.icon-chuangjianjianshi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bingtu"></i>
                    <div class="name">饼图</div>
                    <div class="fontclass">.icon-bingtu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duidiezhuzhuangtu"></i>
                    <div class="name">堆叠柱状图</div>
                    <div class="fontclass">.icon-duidiezhuzhuangtu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duibi"></i>
                    <div class="name">对比</div>
                    <div class="fontclass">.icon-duibi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danxuan_xuanzhong"></i>
                    <div class="name">单选_选中</div>
                    <div class="fontclass">.icon-danxuan_xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duoxuan_weixuanzhong"></i>
                    <div class="name">多选_未选中</div>
                    <div class="fontclass">.icon-duoxuan_weixuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duoxiantu"></i>
                    <div class="name">多线图</div>
                    <div class="fontclass">.icon-duoxiantu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duidiemianjitu"></i>
                    <div class="name">堆叠面积图</div>
                    <div class="fontclass">.icon-duidiemianjitu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duozhutu"></i>
                    <div class="name">多柱图</div>
                    <div class="fontclass">.icon-duozhutu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duoxuan_xuanzhong"></i>
                    <div class="name">多选_选中</div>
                    <div class="fontclass">.icon-duoxuan_xuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ercijiansuo"></i>
                    <div class="name">二次检索</div>
                    <div class="fontclass">.icon-ercijiansuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanye_hou"></i>
                    <div class="name">翻页_后</div>
                    <div class="fontclass">.icon-fanye_hou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fasong"></i>
                    <div class="name">发送</div>
                    <div class="fontclass">.icon-fasong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanye_qian"></i>
                    <div class="name">翻页_前</div>
                    <div class="fontclass">.icon-fanye_qian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenleifenxi"></i>
                    <div class="name">分类分析</div>
                    <div class="fontclass">.icon-fenleifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gexingshezhi"></i>
                    <div class="name">个性设置</div>
                    <div class="fontclass">.icon-gexingshezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenxi"></i>
                    <div class="name">分析</div>
                    <div class="fontclass">.icon-fenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-heliutu"></i>
                    <div class="name">河流图</div>
                    <div class="fontclass">.icon-heliutu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanxitu"></i>
                    <div class="name">关系图</div>
                    <div class="fontclass">.icon-guanxitu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jibenxinxi"></i>
                    <div class="name">基本信息</div>
                    <div class="fontclass">.icon-jibenxinxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jixu"></i>
                    <div class="name">继续</div>
                    <div class="fontclass">.icon-jixu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-juleifenxi"></i>
                    <div class="name">聚类分析</div>
                    <div class="fontclass">.icon-juleifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qiantaotu"></i>
                    <div class="name">嵌套图</div>
                    <div class="fontclass">.icon-qiantaotu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-piliangxiazai"></i>
                    <div class="name">批量下载</div>
                    <div class="fontclass">.icon-piliangxiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qinquanfenxi"></i>
                    <div class="name">侵权分析</div>
                    <div class="fontclass">.icon-qinquanfenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qipaotu"></i>
                    <div class="name">气泡图</div>
                    <div class="fontclass">.icon-qipaotu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quyufenxi"></i>
                    <div class="name">区域分析</div>
                    <div class="fontclass">.icon-quyufenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quanliyaoqiu"></i>
                    <div class="name">权利要求</div>
                    <div class="fontclass">.icon-quanliyaoqiu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riqi"></i>
                    <div class="name">日期</div>
                    <div class="fontclass">.icon-riqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shanchu"></i>
                    <div class="name">删除</div>
                    <div class="fontclass">.icon-shanchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenqingrenfenxi"></i>
                    <div class="name">申请人分析</div>
                    <div class="fontclass">.icon-shenqingrenfenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouqi"></i>
                    <div class="name">收起</div>
                    <div class="fontclass">.icon-shouqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shujutongji"></i>
                    <div class="name">数据统计</div>
                    <div class="fontclass">.icon-shujutongji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuxingtu"></i>
                    <div class="name">树形图</div>
                    <div class="fontclass">.icon-shuxingtu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuo"></i>
                    <div class="name">搜索</div>
                    <div class="fontclass">.icon-sousuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjia"></i>
                    <div class="name">添加</div>
                    <div class="fontclass">.icon-tianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiawenjian"></i>
                    <div class="name">添加文件</div>
                    <div class="fontclass">.icon-tianjiawenjian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wuliyinyong"></i>
                    <div class="name">物理引用</div>
                    <div class="fontclass">.icon-wuliyinyong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiazai"></i>
                    <div class="name">下载</div>
                    <div class="fontclass">.icon-xiazai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxizhongxin"></i>
                    <div class="name">消息中心</div>
                    <div class="fontclass">.icon-xiaoxizhongxin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinyingfenxi"></i>
                    <div class="name">新颖分析</div>
                    <div class="fontclass">.icon-xinyingfenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiugai"></i>
                    <div class="name">修改</div>
                    <div class="fontclass">.icon-xiugai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzeshujuyuan"></i>
                    <div class="name">选择数据源</div>
                    <div class="fontclass">.icon-xuanzeshujuyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuritu"></i>
                    <div class="name">旭日图</div>
                    <div class="fontclass">.icon-xuritu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yanzheng"></i>
                    <div class="name">验证</div>
                    <div class="fontclass">.icon-yanzheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yansedingzhi"></i>
                    <div class="name">颜色定制</div>
                    <div class="fontclass">.icon-yansedingzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhankai"></i>
                    <div class="name">展开</div>
                    <div class="fontclass">.icon-zhankai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhexiantu"></i>
                    <div class="name">折线图</div>
                    <div class="fontclass">.icon-zhexiantu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhanghushezhi"></i>
                    <div class="name">账户设置</div>
                    <div class="fontclass">.icon-zhanghushezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengtigaikuang"></i>
                    <div class="name">整体概况</div>
                    <div class="fontclass">.icon-zhengtigaikuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanlijiazhidu"></i>
                    <div class="name">专利价值度</div>
                    <div class="fontclass">.icon-zhuanlijiazhidu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zidingyifenxi"></i>
                    <div class="name">自定义分析</div>
                    <div class="fontclass">.icon-zidingyifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zanting"></i>
                    <div class="name">暂停</div>
                    <div class="fontclass">.icon-zanting</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sousuokuangneiqingchu"></i>
                    <div class="name">搜索框内清除</div>
                    <div class="fontclass">.icon-sousuokuangneiqingchu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianqu"></i>
                    <div class="name">减去</div>
                    <div class="fontclass">.icon-jianqu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tianjiazhaopian"></i>
                    <div class="name">添加照片</div>
                    <div class="fontclass">.icon-tianjiazhaopian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaoxizhongxin_xiaoxi"></i>
                    <div class="name">消息中心_消息</div>
                    <div class="fontclass">.icon-xiaoxizhongxin_xiaoxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yonghutiyanjihua"></i>
                    <div class="name">用户体验计划</div>
                    <div class="fontclass">.icon-yonghutiyanjihua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yijianfankui"></i>
                    <div class="name">意见反馈</div>
                    <div class="fontclass">.icon-yijianfankui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gengxinrizhi"></i>
                    <div class="name">更新日志</div>
                    <div class="fontclass">.icon-gengxinrizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-falv"></i>
                    <div class="name">法律</div>
                    <div class="fontclass">.icon-falv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouqiliebiao"></i>
                    <div class="name">收起列表</div>
                    <div class="fontclass">.icon-shouqiliebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wenjianjia"></i>
                    <div class="name">文件夹</div>
                    <div class="fontclass">.icon-wenjianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhankailiebiao"></i>
                    <div class="name">展开列表</div>
                    <div class="fontclass">.icon-zhankailiebiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinjianwenjianjia"></i>
                    <div class="name">新建文件夹</div>
                    <div class="fontclass">.icon-xinjianwenjianjia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meiyoushuju"></i>
                    <div class="name">没有数据</div>
                    <div class="fontclass">.icon-meiyoushuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-redianwenti"></i>
                    <div class="name">热点问题</div>
                    <div class="fontclass">.icon-redianwenti</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qita"></i>
                    <div class="name">其他</div>
                    <div class="fontclass">.icon-qita</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shiyonggongneng"></i>
                    <div class="name">实用功能</div>
                    <div class="fontclass">.icon-shiyonggongneng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rumen"></i>
                    <div class="name">入门</div>
                    <div class="fontclass">.icon-rumen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liulanzuiduo"></i>
                    <div class="name">浏览最多</div>
                    <div class="fontclass">.icon-liulanzuiduo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daochubaogao"></i>
                    <div class="name">导出报告</div>
                    <div class="fontclass">.icon-daochubaogao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangdingshoujichenggong"></i>
                    <div class="name">绑定手机成功</div>
                    <div class="fontclass">.icon-bangdingshoujichenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mimazhongzhichenggong"></i>
                    <div class="name">密码重置成功</div>
                    <div class="fontclass">.icon-mimazhongzhichenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangdingyouxiangchenggong"></i>
                    <div class="name">绑定邮箱成功</div>
                    <div class="fontclass">.icon-bangdingyouxiangchenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tijiaochenggong"></i>
                    <div class="name">提交成功</div>
                    <div class="fontclass">.icon-tijiaochenggong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fanhuidingbu"></i>
                    <div class="name">返回顶部</div>
                    <div class="fontclass">.icon-fanhuidingbu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongsibaogao"></i>
                    <div class="name">公司报告</div>
                    <div class="fontclass">.icon-gongsibaogao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jingzhengbaogao"></i>
                    <div class="name">竞争报告</div>
                    <div class="fontclass">.icon-jingzhengbaogao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kejibaogao"></i>
                    <div class="name">科技报告</div>
                    <div class="fontclass">.icon-kejibaogao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-baogaoyexuanzhong"></i>
                    <div class="name">报告页选中</div>
                    <div class="fontclass">.icon-baogaoyexuanzhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangchuanwendang"></i>
                    <div class="name">上传文档</div>
                    <div class="fontclass">.icon-shangchuanwendang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuangpingliulan"></i>
                    <div class="name">双屏浏览</div>
                    <div class="fontclass">.icon-shuangpingliulan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouqiquanwen"></i>
                    <div class="name">收起全文</div>
                    <div class="fontclass">.icon-shouqiquanwen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhushi"></i>
                    <div class="name">注释</div>
                    <div class="fontclass">.icon-zhushi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhankaiquanwen"></i>
                    <div class="name">展开全文</div>
                    <div class="fontclass">.icon-zhankaiquanwen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhishichanquanfuwujigou"></i>
                    <div class="name">知识产权服务机构</div>
                    <div class="fontclass">.icon-zhishichanquanfuwujigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xueshukeyanjigouyukeyanrenyuan"></i>
                    <div class="name">学术科研机构与科研人员</div>
                    <div class="fontclass">.icon-xueshukeyanjigouyukeyanrenyuan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengfujigou"></i>
                    <div class="name">政府机构</div>
                    <div class="fontclass">.icon-zhengfujigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zixunfuwujigou"></i>
                    <div class="name">咨询服务机构</div>
                    <div class="fontclass">.icon-zixunfuwujigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kejiyanfaxingqiye"></i>
                    <div class="name">科技研发型企业</div>
                    <div class="fontclass">.icon-kejiyanfaxingqiye</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinrongtouzijigou"></i>
                    <div class="name">金融投资机构</div>
                    <div class="fontclass">.icon-jinrongtouzijigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-deguo"></i>
                    <div class="name">德国</div>
                    <div class="fontclass">.icon-deguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhongguo"></i>
                    <div class="name">中国</div>
                    <div class="fontclass">.icon-zhongguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-riben"></i>
                    <div class="name">日本</div>
                    <div class="fontclass">.icon-riben</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ouzhouzhuanliju"></i>
                    <div class="name">欧洲专利局</div>
                    <div class="fontclass">.icon-ouzhouzhuanliju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meiguo"></i>
                    <div class="name">美国</div>
                    <div class="fontclass">.icon-meiguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-WIPO"></i>
                    <div class="name">WIPO</div>
                    <div class="fontclass">.icon-WIPO</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuanzeshujuyuan_new"></i>
                    <div class="name">选择数据源_new</div>
                    <div class="fontclass">.icon-xuanzeshujuyuan_new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hanguo"></i>
                    <div class="name">韩国</div>
                    <div class="fontclass">.icon-hanguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangshigongsifenxi"></i>
                    <div class="name">上市公司分析</div>
                    <div class="fontclass">.icon-shangshigongsifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dailifenxi"></i>
                    <div class="name">代理分析</div>
                    <div class="fontclass">.icon-dailifenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhiliangfenxi"></i>
                    <div class="name">质量分析</div>
                    <div class="fontclass">.icon-zhiliangfenxi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daochushuju"></i>
                    <div class="name">导出数据</div>
                    <div class="fontclass">.icon-daochushuju</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gongjuchaxun"></i>
                    <div class="name">工具查询</div>
                    <div class="fontclass">.icon-gongjuchaxun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gensuifenxi_new"></i>
                    <div class="name">跟随分析_new</div>
                    <div class="fontclass">.icon-gensuifenxi_new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xinyingfenxi_new"></i>
                    <div class="name">新颖分析_new</div>
                    <div class="fontclass">.icon-xinyingfenxi_new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuniyinyong_new"></i>
                    <div class="name">虚拟引用_new</div>
                    <div class="fontclass">.icon-xuniyinyong_new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhuanlijiazhidu_new"></i>
                    <div class="name">专利价值度_new</div>
                    <div class="fontclass">.icon-zhuanlijiazhidu_new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jishujiazhidu_new"></i>
                    <div class="name">技术价值度_new</div>
                    <div class="fontclass">.icon-jishujiazhidu_new</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-danmai"></i>
                    <div class="name">丹麦</div>
                    <div class="fontclass">.icon-danmai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-eluosi"></i>
                    <div class="name">俄罗斯</div>
                    <div class="fontclass">.icon-eluosi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-faguo"></i>
                    <div class="name">法国</div>
                    <div class="fontclass">.icon-faguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-helan"></i>
                    <div class="name">荷兰</div>
                    <div class="fontclass">.icon-helan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fenlan"></i>
                    <div class="name">芬兰</div>
                    <div class="fontclass">.icon-fenlan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lusenbao"></i>
                    <div class="name">卢森堡</div>
                    <div class="fontclass">.icon-lusenbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jianada"></i>
                    <div class="name">加拿大</div>
                    <div class="fontclass">.icon-jianada</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yingguo"></i>
                    <div class="name">英国</div>
                    <div class="fontclass">.icon-yingguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yindu"></i>
                    <div class="name">印度</div>
                    <div class="fontclass">.icon-yindu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-taiwan"></i>
                    <div class="name">台湾</div>
                    <div class="fontclass">.icon-taiwan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xibanya"></i>
                    <div class="name">西班牙</div>
                    <div class="fontclass">.icon-xibanya</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
